<template>
    <div class="fff" >
        <div class="msg_item slider-item"  :style="deleteSlider"  v-waves @click='onClick' @touchstart='touchStart' @touchmove='touchMove' @touchend='touchEnd'>
            <div class="left_img">
                <img :src="require('@/assets/imgs/header.png')" alt="" srcset="">
            </div>
            <div class="right_test border-bottom">
                <div class="right_top">
                    <span class="title jiacu">小明</span>
                    <span class="time huise">11:20</span>
                </div>
                <div class="bottom_msg huise">
                    哪怕不知去向何方,努力下去就是希望 哪怕不知去向何方,努力下去就是希望 哪怕不知去向何方,努力下去就是希望 哪怕不知去向何方,努力下去就是希望
                </div>
            </div>
        </div>
        <div class="remove" ref='remove'>
            <span>删除我</span>
        </div>
    </div>
</template>
<script>
export default {
    props:{
        to:[String, Object]
    },
    data(){
        return {
            startX: 0,   //触摸位置
            endX: 0,     //结束位置
            moveX: 0,   //滑动时的位置
            disX: 0,    //移动距离
            deleteSlider: '',//滑动时的效果,使用v-bind:style="deleteSlider"
            lastIndex: "",
            startY: 0,   //触摸位置
            endY: 0,     //结束位置
            moveY: 0,   //滑动时的位置
        }
    },
    methods:{
        routerLink() {
            if (this.to) return this.$router.push(this.to);
        },
        onClick() {
            this.$emit('click');
            this.routerLink();
        },
        touchStart(ev){
                this.restSlide();    
                ev = ev || event

                //tounches类数组，等于1时表示此时有只有一只手指在触摸屏幕

                if (ev.touches.length == 1) {
                    // 记录开始位置
                    this.startX = ev.touches[0].clientX;
                    this.startY = ev.touches[0].clientY;
                }
        },
        touchMove(ev){
            // console.log("在滑",ev)
             ev = ev || event;
                let parentElement = ev.currentTarget.parentElement;
                //获取删除按钮的宽度，此宽度为滑块左滑的最大距离
                let wd = this.$refs.remove.offsetWidth;
                if (ev.touches.length == 1) {
                    // 滑动时距离浏览器左侧实时距离
                    this.moveY = ev.touches[0].clientY
                    this.moveX = ev.touches[0].clientX
                    if (Math.abs(this.moveY - this.startY) < 30) {
                        //起始位置减去 实时的滑动的距离，得到手指实时偏移距离
                        this.disX = this.startX - this.moveX;
                        // 如果是向右滑动或者不滑动，不改变滑块的位置
                        if (this.disX < wd / 3 || this.disX == 0) {
                            this.deleteSlider = "transform:translateX(0px)";
                            parentElement.dataset.type = 0;
                            // 大于0，表示左滑了，此时滑块开始滑动
                        } else if (this.disX > wd / 2) {
                            //具体滑动距离我取的是 手指偏移距离*5。
                            parentElement.dataset.type = 1;
                            this.deleteSlider = "transform:translateX(-" + this.disX + "px)";

                            // 最大也只能等于删除按钮宽度
                            if (this.disX*1.5 >= wd) {
                                parentElement.dataset.type = 1;
                                this.deleteSlider = "transform:translateX(-" + wd + "px)";

                            }
                        }
                    }
                }
        },
        touchEnd(ev){
            // console.log("结束滑了",ev)
             ev = ev || event;
                let parentElement = ev.currentTarget.parentElement;
                let wd = this.$refs.remove.offsetWidth;
                
                if (ev.changedTouches.length == 1) {

                    let endY = ev.changedTouches[0].clientY;
                    if (Math.abs(this.startY - endY) < 30) {
                        let endX = ev.changedTouches[0].clientX;
                        this.disX = this.startX - endX;
                        //如果距离小于删除按钮一半,强行回到起点

                        if (this.disX < (wd / 3 )) {
                            parentElement.dataset.type = 0;
                            this.deleteSlider = "transform:translateX(0px)";
                        } else {
                            //大于一半 滑动到最大值
                            parentElement.dataset.type = 1;
                            this.deleteSlider = "transform:translateX(-" + wd + "px)";
                        }
                    }
                }
        },
        restSlide(){
                let listItems = document.querySelectorAll('.slider-item');
                // 复位
                for (let i = 0; i < listItems.length; i++) {
                    listItems[i].style = "transform:translateX(0" + "rem)";
                }
            },

    }
}
</script>


<style lang="scss" scoped>
.fff{
    display: flex;
    position: relative;
    .remove{
        position: absolute;
        width: 60px;
        right: 0rem;
        top: 0px;
        bottom: 0px;
        z-index: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #ea6666;
        color: #fff;
    }
}
    .msg_item{
        display: flex;
        padding-right: 0.5rem; 
        background: #fff;
        z-index: 2;
        .left_img{
            width: 3rem;
            height: 3rem;
            margin:0.5rem; 
            img{
                width: 100%;
                height: 100%;
            }
        }
        .right_test{
            flex: 1;
            display: flex;
            padding: 0.5rem 0.5rem;
            flex-direction: column;
            justify-content: space-between;
            // border-bottom: 0.01rem solid $borde-color;
            overflow: hidden;
            .right_top{
                display: flex;
                justify-content:space-between;
                .title{
                    font-size: 0.9rem;
                }
            }
            .bottom_msg{
                overflow: hidden;
                text-overflow:ellipsis;
                white-space: nowrap;
            }
            
        }
    }
    .msg_item:active{
        background: $activity;
    }
</style>

